import { useState, memo, forwardRef, useRef, useEffect } from 'react'
import { Button, Form, Input, Select, InputNumber, Row, Col, message } from 'antd'
import PreviewBox from '../PreviewBox'
import LdPrinters from '../../../../components/LdPrinters'
import { paperSizeOptions, printTypeOptions, colorOptions, secretOptions } from "../../../../utils/constant";
import './index.scss'
import bus from '../../../../utils/eventBus';
const haveBarcodeOptions = [
    { label: '是', value: '1' },
    { label: '否', value: '0' }
]
const PrintView = forwardRef((props: any, ref: any) => {
    const { onClose, printRow = {} } = props
    const [loading, setLoading] = useState<boolean>(false)
    const [secretList, setSecretList] = useState<any[]>([...secretOptions])
    const [previewParams, setPreviewParams] = useState<any>({})
    const [docTypeOptions, setDocTypeOptions] = useState<any[]>([])
    const [pos, setPos] = useState<string>('1')
    const formRef = useRef<any>(null)
    const handleStartPrint = () => {
        formRef.current.validateFields().then((res: any) => {
            setLoading(true)
            const params = { ...printRow.data, ...res }
            window.chromePro.startPrint(JSON.stringify(params));
        }).catch(() => { })

    }
    const getUserAuthSecretFinished = (res: any) => {
        if (res.code === 200) {
            res.data.map((item: any) => {
                item.label = item.secretLabel
                item.value = item.secret
            })
            setSecretList(res.data)
            if (res.data.length > 0) {
                formRef.current.setFieldsValue({
                    fileLevel: res.data[0].value
                })
            }
        }
    }
    const getPrintDocTypeFinished = (res: any) => {
        if (res.code === 200) {
            setDocTypeOptions(res.data)
            if (res.data.length > 0) {
                formRef.current.setFieldsValue({
                    docType: res.data[0].value
                })
            }
        }
    }
    const formValueChange = (changeValue: any, allValue: any): any => {
        const { fileLevel, haveBarcode, colorType, layer } = changeValue
        if (fileLevel || haveBarcode || colorType || layer) {
            setPreviewParams((origin:any)=>{
                return {...origin,...changeValue}
            })
        }
    }
    const getBceCodeStrategyAttrFinished = (res: any) => {
        if (res.code === 200) {
            setPos(res.data.pos.toString())
        }
    }
    const getSelect = (val: string) => {
        formRef.current.setFieldsValue({
            printerName: val
        })
    }
    const startPrintFinished = (res: any) => {
        if (res.code === 200) {
            setLoading(false)
            message.success("打印任务提交成功！");
            onClose && onClose()
        }else{
            message.error(res.msg)
            setLoading(false)
        }
    }
    const getNewPrintTask = () => {
        const { code, data } = printRow
        if (code === 200) {
            formRef.current.setFieldsValue({
                ...data,
                haveBarcode: '1'
            })
            const { haveBarcode = '1', layer = 1, colorType = 1 } = data
            setPreviewParams((origin: any) => {
                return { ...origin, haveBarcode, layer, colorType }
            })
        } else {
            message.error('打印文件解析有误')
        }
    }
    useEffect(() => {
        getNewPrintTask()
        window.chromePro.getUserAuthSecret();
        window.chromePro.getPrintDocType(JSON.stringify({}));
        window.chromePro.getBceCodeStrategyAttr(JSON.stringify({ type: 1 }))
        bus.addListener('getUserAuthSecretFinished', getUserAuthSecretFinished)
        bus.addListener('getPrintDocTypeFinished', getPrintDocTypeFinished)
        bus.addListener('getBceCodeStrategyAttrFinished', getBceCodeStrategyAttrFinished)
        bus.addListener('startPrintFinished', startPrintFinished)
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener('getUserAuthSecretFinished', getUserAuthSecretFinished)
            bus.removeListener('getPrintDocTypeFinished', getPrintDocTypeFinished)
            bus.removeListener('getBceCodeStrategyAttrFinished', getBceCodeStrategyAttrFinished)
            bus.removeListener('startPrintFinished', startPrintFinished)
        }
    }, [])
    return (
        <>
            <div className="tray-print">
                <div className="box-bd">
                    {/* <div className="tab-container"></div> */}
                    <div className="content flex-start">
                        <PreviewBox pos={pos} mode={1} params={previewParams} />
                        <div className="setting-container">
                            <div className="form-container">
                                <h3 className='mb-10'>打印设置</h3>
                                <Form ref={formRef} onValuesChange={formValueChange}>
                                    <Row gutter={24}>
                                        <Col span={24}>
                                            <Form.Item label="打印设备" name="printerName" rules={[{ required: true, message: '请选择打印设备' }]}>
                                                <LdPrinters getSelect={getSelect} />
                                            </Form.Item>
                                        </Col>
                                        <Col span={24}>
                                            <Form.Item label="文件名称" name="title" rules={[{ required: true, message: '请输入文件名称' }]}>
                                                <Input placeholder='请输入文件名称' />
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="文件密级" name="fileLevel" rules={[{ required: true, message: '请选择文件密级' }]}>
                                                <Select options={secretList} placeholder="请选择文件密级"></Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="打印份数" name="partNum" rules={[{ required: true, message: '请输入打印份数' }]}>
                                                <InputNumber precision={0} style={{ width: '100%' }} controls={false} min={1} max={100} placeholder="请输入打印份数"></InputNumber>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="打印页数" name="totalPage" rules={[{ required: true, message: '请输入打印页数' }]}>
                                                <InputNumber disabled precision={0} style={{ width: '100%' }} controls={false} min={1} max={9999} placeholder="请输入打印页数"></InputNumber>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="纸张大小" name="paperType" rules={[{ required: true, message: '请选择纸张大小' }]}>
                                                <Select options={paperSizeOptions} placeholder="请选择纸张大小"></Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="打印颜色" name="colorType" rules={[{ required: true, message: '请选择打印颜色' }]}>
                                                <Select options={colorOptions} placeholder="请选择打印颜色"></Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="单双选择" name="layer" rules={[{ required: true, message: '请选择单双选择' }]}>
                                                <Select options={printTypeOptions} placeholder="请选择单双选择"></Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="条码显示" name="haveBarcode" rules={[{ required: true, message: '请选择条码显示' }]}>
                                                <Select options={haveBarcodeOptions} placeholder="请选择条码显示"></Select>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item label="文件类型" name="docType" rules={[{ required: true, message: '请选择文件类型' }]}>
                                                <Select options={docTypeOptions} placeholder="请选择文件类型"></Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Form>
                            </div>
                            <div className="footer">
                                <Button type="primary" style={{ width: '330px', height: '46px', fontSize: '18px', background: '#0b7cf1' }}
                                    onClick={handleStartPrint} loading={loading}>提交打印</Button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
})
export default memo(PrintView)